Autify を Github Actions と連携してCIでシナリオを実行する
Autify の検証環境を利用できる機会があったので素振りのために Next.js 製のサンプル Web アプリに対して CI で自動的にテストを回せる環境を設定してみました。
Web アプリを作成
Vercel のテンプレート一覧からサンプルの Web アプリを拝借します。今回はEcommerceのテンプレートを利用しました。
Autify はインターネットを介してテストを行うためプロジェクトをネット上からアクセスできる状態にします。今回は Vercel を使ってホスティングを行いました。
Autify DevTool の設定&シナリオの追加
Autify アカウントを作成したら Chrome 拡張をブラウザに追加します。Allow Incognito を ON にします。
早速 Autify の画面から新しいシナリオを追加します。先ほどデプロイしたアプリの URL をここに設定します。
次に先ほど URL を指定したページがブラウザで開くので、要素をクリックしたりスクロールしたりした後に 右下の Autify メニューの Save ボタンを押します。するとレコーディングされたシナリオがこのように生成されます。
このシナリオの URL を指定して CI で実行します。
試しに一度テストを実行してみる
手動で実行してみた結果はこのような感じでした。
実行結果とスクリーンショットも確認できます。
シナリオ
Autify の主要な機能をざっくりご紹介します。まずはシナリオです。
シナリオとは、Autify で実行するテストシナリオです。指定した URL がブラウザで開かれるので手動で操作した内容がレコーディングされ次回から自動で実行されます。
細かい利用制限等は公式ドキュメントと以下のブログも参考にしてみてください。
ステップグループ
ステップグループは異なるシナリオで再利用することができる一連のステップです。同じ内容を異なるシナリオ内でテストしたい場合毎度記録する必要がなく効率的にシナリオを作成することができます。
ステップグループの種類は 2 種類で、シナリオ冒頭で利用するステップグループとシナリオの中間または末尾で利用するステップグループです。冒頭で利用するものはシナリオの冒頭に一回のみ利用が可能で、中間または末尾で利用するステップグループはシナリオ内で複数回利用することができます。
テストプラン
テストプランを使うと複数のシナリオを複数の実行環境で日付や時間を指定して実行することができます。
優先度別にテストプランを作成してマージのタイミングで毎回回すものと定期的に行うフルテストなど、必要に応じて実行の頻度とタイミングを調整する使い方が公式が推奨している利用方法だそうです。参考：「テストプラン」（旧「スケジュール」）とはなんですか？
CI で Autify を実行する
最後に Github Actions から Autify を実行してみます。
以下の内容で Github Actions を設定します。アクセストークンは Github の Repository Secret にAutifyWebAccessTokenの命名で保存しています。
on:
push:
branches:
- main
jobs:
run-test-autify:
runs-on: ubuntu-latest
timeout-minutes: 60
steps:
- uses: autifyhq/actions-web-test-run@v2
with:
access-token: ${{ secrets.AutifyWebAccessToken }}
autify-test-url: https://app.autify.com/projects/2997/scenarios/146932
結果
Github Actions から Autify を API 経由でテストを実行することができました。
所感
本当に画面をぽちぽちするだけでテストが終わってしまいました。シンプルでわかりやすい UI に加えドキュメントも親切で読みやすいので技術的なバックグラウンドがないユーザーでも簡単にテストを完了することができそうでした。お値段は少々お高めですがエンジニアを雇うよりは安く済ませることができますし、コードを書くことなくテストを作成、実行することができるため、例えばエンジニアは機能実装に注力し、Pdm や PO が動作確認のついでにテストを構築して実行する、と言ったようなプロジェクト全体で効率よいテストの実現が Autify を使えば可能になりそうだと思いました。
